<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">概览</div>
    <div class="overview">
      <div class="time-line">
        <h3>数据时间轴 </h3>
        <div class="line-wrapper">
          <el-timeline>
          <el-timeline-item timestamp="2020/10/05" placement="top">
            <el-card>
              <p>
                【打捞】
                <router-link to="/main/boxDetail">张三打捞 xxx 大闸蟹  2020/10/05 04:30:20</router-link>
              </p>
              <p class="mt10">
                【打捞】
                <router-link to="/main/boxDetail">张三投放  xxx 药物  2020/10/05 08:30:20</router-link>
              </p>
              <p class="mt10">
                【收购】
                <router-link to="/main/buyDetail">李四收购  xxx 批次大闸蟹  2020/10/05 12:30:20</router-link>
              </p>
              <p class="mt10">
                【检查】
                <router-link to="/main/examDetail">周杰伦检查  xxx 批次大闸蟹  2020/10/05 13:30:20</router-link>
              </p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="20120/10/03" placement="top">
            <el-card>
              <p>
                【打捞】
                <router-link to="/main/boxDetail">张三打捞 xxx 大闸蟹  2020/10/03 04:30:20</router-link>
              </p>
              <p class="mt10">
                【打捞】
                <router-link to="/main/boxDetail">张三投放  xxx 药物  2020/10/03 08:30:20</router-link>
              </p>
              <p class="mt10">
                【收购】
                <router-link to="/main/buyDetail">李四收购  xxx 批次大闸蟹  2020/10/03 12:30:20</router-link>
              </p>
              <p class="mt10">
                【检查】
                <router-link to="/main/examDetail">周杰伦检查  xxx 批次大闸蟹  2020/10/03 13:30:20</router-link>
              </p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2020/10/02" placement="top">
            <el-card>
              <p class="mt10">
                【检查】
                <router-link to="/main/examDetail">周杰伦检查  xxx 批次大闸蟹  2020/10/02 13:30:20</router-link>
              </p>
              <p class="mt10">
                【消费】
                <router-link to="/main/examDetail">王五购买  xxx 只大闸蟹  2020/10/02 14:30:20</router-link>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        </div>
      </div>
      <div class="list-sum">
        <h3>近7日交易量</h3>
        <div class="chart-box">
          <v-chart ref="mycharts"
            :options="option"></v-chart>
        </div>
      </div>
    </div>
    <div class="overview mt10">
      <div class="list-box">
        <h3>网箱信息</h3>
        <ul class="box-wrapper">
          <li>
            <p class="clearfix">
              投放 <router-link to="boxDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              打捞 <router-link to="boxDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              水质 <router-link to="boxDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
        </ul>
      </div>
      <div class="list-box">
        <h3>检查信息</h3>
        <ul class="box-wrapper">
          <li>
            <p class="clearfix">
              检查 <router-link to="examDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              检查 <router-link to="examDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              检查 <router-link to="examDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              检查 <router-link to="examDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              检查 <router-link to="examDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              检查 <router-link to="examDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="overview mt10">
      <div class="list-box">
        <h3>收购信息</h3>
        <ul class="box-wrapper">
          <li>
            <p class="clearfix">
              收购 <router-link to="boxDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              收购 <router-link to="boxDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              收购 <router-link to="boxDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
        </ul>
      </div>
      <div class="list-box">
        <h3>消费信息</h3>
        <ul class="box-wrapper">
          <li>
            <p class="clearfix">
              交易 <router-link to="consumerDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              交易 <router-link to="consumerDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
          <li class="mt10">
            <p class="clearfix">
              交易 <router-link to="consumerDetail">20200384943423</router-link>
              <span class="fr">2020/10/02 12:00:09</span>
            </p>
            <p>
              处理人: 张三
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      option: {}
    }
  },
  created () {
    this.initLine()
  },
  methods: {
    initLine () {
      this.option = {
        tooltip: {
          trigger: 'axis'
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%'
        //   // containLabel: true
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '箱',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.overview {
  display: flex;
  h3 {
    background: lighten($color: #ddd, $amount: 10)!important;
  }
  .list-box {
    flex: 1;
    background: #fff;
    position: relative;
    max-height: 500px;
    box-shadow: 0 0 4px rgba($color: #000000, $alpha: .2);
    border-radius: 4px;
    .box-wrapper {
      padding: 50px 10px 10px;
      overflow-y: auto;
      width: 100%;
      height: 100%;
    }
    h3 {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      padding-left: 15px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
      width: 100%;
      background: #fff;
      height: 40px;
      line-height: 40px;
      z-index: 11;
      &:before {
        content: '';
        position: absolute;
        left: 6px;
        top: 10px;
        display: inline-block;
        width: 3px;
        height: 20px;
        background: rgba($color: blue, $alpha: .6);
      }
    }
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
  .time-line {
    flex: 1;
    background: #fff;
    margin-top: 10px;
    max-height: 500px;
    overflow-y: auto;
    box-shadow: 0 0 4px rgba($color: #000000, $alpha: .2);
    border-radius: 4px;
    position: relative;
    .line-wrapper {
      width: 100%;
      height: 100%;
      padding: 50px 10px 10px;
      overflow-y: auto;
    }
    h3 {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      padding-left: 15px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
      width: 100%;
      background: #fff;
      height: 40px;
      line-height: 40px;
      z-index: 11;
      &:before {
        content: '';
        position: absolute;
        left: 6px;
        top: 10px;
        display: inline-block;
        width: 3px;
        height: 20px;
        background: rgba($color: blue, $alpha: .6);
      }
    }
  }
  .list-sum {
    margin-left: 10px;
    flex: 1;
    margin-top: 10px;
    box-shadow: 0 0 4px rgba($color: #000000, $alpha: .2);
    border-radius: 4px;
    position: relative;
    h3 {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      padding-left: 15px;
      border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
      width: 100%;
      background: #fff;
      height: 40px;
      line-height: 40px;
      z-index: 11;
      &:before {
        content: '';
        position: absolute;
        left: 6px;
        top: 10px;
        display: inline-block;
        width: 3px;
        height: 20px;
        background: rgba($color: blue, $alpha: .6);
      }
    }
    .chart-box {
      background: #fff;
      width: 100%;
      height: 500px;
      border-radius: 4px;
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
